const list = [
	{
		label: "",
		value: ""
	},
	{
		label: "张三",
		value: "101"
	},
	{
		label: "李四",
		value: "102"
	},
	{
		label: "王五",
		value: "103"
	},
	{
		label: "赵六",
		value: "104"
	}
];

const selected = {};

const personBox = $("#person-select");
const selectedUl = $("#selected-ul");

for (let item of list) {
	let option = $(`<option value="${item.value}">${item.label}</option>`);
	personBox.append(option);
}

personBox.change(function () {
	let value = personBox.val();
	let target = null;

	if (!value) return; // 空白则不做后续处理

	for (let item of list) {
		if (item.value === value) {
			target = item;
			if (selected[item.value]) {
				alert(`${item.label} 已被选择`);
				return;
			}
			selected[item.value] = item;
			break;
		}
	}

	let li = $("<li></li>");
	let name = $(`<span id="${target.value}">${target.label}</span>`);
	let X = $("<span>X</span>");

	X.on('click', function() {
		delete selected[target.value];
		li.remove();
	});

	li.append(name);
	li.append(X);

	selectedUl.append(li);
	
});